<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 搜索栏 -->
<div class="search-bar">
    <input type="text" id="searchInput" placeholder="请输入关键字查询" />
    <button id="searchBtn">🔍</button>
</div>

<!-- 查询历史记录模块 -->
<div id="searchHistory" class="search-history">
    <div class="history-header">
        <span>历史记录</span>
        <button id="clearHistory">清空</button>
    </div>
    <div id="historyList" class="history-list"></div>
</div>

<!-- 下面是结果区域（你的原有内容） -->
<div id="searchResults" class="results-container"></div>

<script>
    const searchInput = document.getElementById("searchInput");
    const searchBtn = document.getElementById("searchBtn");
    const historyList = document.getElementById("historyList");
    const clearHistory = document.getElementById("clearHistory");

    // 从 localStorage 读取历史记录
    let history = JSON.parse(localStorage.getItem("searchHistory") || "[]");

    // 渲染历史记录
    function renderHistory() {
        historyList.innerHTML = "";
        if (history.length === 0) {
            historyList.innerHTML = '<p class="empty">暂无搜索记录</p>';
            return;
        }
        history.forEach((item) => {
            const tag = document.createElement("span");
            tag.className = "history-item";
            tag.textContent = item;
            tag.onclick = () => {
                searchInput.value = item;
                doSearch(item);
            };
            historyList.appendChild(tag);
        });
    }

    // 执行搜索（可换成你自己的搜索逻辑）
    function doSearch(keyword) {
        if (!keyword.trim()) return;
        saveHistory(keyword);
        // 模拟搜索结果
        document.getElementById("searchResults").innerHTML =
            "<p>正在搜索：" + keyword + "</p>";
    }

    // 保存搜索记录
    function saveHistory(keyword) {
        keyword = keyword.trim();
        if (!keyword) return;
        history = history.filter((item) => item !== keyword); // 去重
        history.unshift(keyword); // 插入最前
        if (history.length > 5) history.pop(); // 限制数量
        localStorage.setItem("searchHistory", JSON.stringify(history));
        renderHistory();
    }

    // 绑定事件
    searchBtn.onclick = () => doSearch(searchInput.value);
    clearHistory.onclick = () => {
        history = [];
        localStorage.removeItem("searchHistory");
        renderHistory();
    };

    renderHistory();
</script>

<style>
    .search-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        padding: 8px;
    }

    #searchInput {
        flex: 1;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 6px;
    }

    #searchBtn {
        background: #007bff;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 8px 12px;
    }

    .search-history {
        background: #fff;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .history-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        margin-bottom: 6px;
    }

    .history-header button {
        background: none;
        border: none;
        color: #888;
        font-size: 12px;
    }

    .history-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .history-item {
        background: #f2f2f2;
        color: #333;
        font-size: 13px;
        padding: 4px 10px;
        border-radius: 16px;
        cursor: pointer;
    }

    .history-item:hover {
        background: #e6f0ff;
    }

    .empty {
        color: #aaa;
        font-size: 12px;
    }
</style>

</body>
</html>
